<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>CocosCreator着色器的简单实用 | 小魏的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="Vker,Vker's Blog">
  
  <meta name="description" content="Cocos Creator 版本: 2.0.8 时间: 2019年3月15日16:53:18 由于Cocos 的材质系统并不是太完善 所以官方并没有推出相关 着色器的文档,但是官方给出了一个Demo, 可以更具这个进行改造一下就可以写自己的着色器了.(官方给出的着色器的例子)[https://github.com/cocos-creator/heartfelt]">
<meta name="keywords" content="Cocos Creator,优化">
<meta property="og:type" content="article">
<meta property="og:title" content="CocosCreator着色器的简单实用">
<meta property="og:url" content="https://leng521.top/posts/e02f2181/index.html">
<meta property="og:site_name" content="小魏的博客">
<meta property="og:description" content="Cocos Creator 版本: 2.0.8 时间: 2019年3月15日16:53:18 由于Cocos 的材质系统并不是太完善 所以官方并没有推出相关 着色器的文档,但是官方给出了一个Demo, 可以更具这个进行改造一下就可以写自己的着色器了.(官方给出的着色器的例子)[https://github.com/cocos-creator/heartfelt]">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2019-08-14T03:22:53.966Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CocosCreator着色器的简单实用">
<meta name="twitter:description" content="Cocos Creator 版本: 2.0.8 时间: 2019年3月15日16:53:18 由于Cocos 的材质系统并不是太完善 所以官方并没有推出相关 着色器的文档,但是官方给出了一个Demo, 可以更具这个进行改造一下就可以写自己的着色器了.(官方给出的着色器的例子)[https://github.com/cocos-creator/heartfelt]">
  
  
    <link rel="icon" href="/head.jpg">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?2eaff0c5326867354b0d3469d507d209";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>

  

</head>
</html>
<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-menu" class="header-menu-pos animated">
            <div class="header-menu-container">
                <a href="/" class="left">
                    <span class="site-title">Vker&#39;s Blog</span>
                </a>
                <nav id="header-menu-nav" class="right">
                    
                    <a  href="/">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                    
                    <a  href="/archives">
                        <i class="fa fa-archive"></i>
                        <span>Archives</span>
                    </a>
                    
                    <a  href="/about">
                        <i class="fa fa-user"></i>
                        <span>About</span>
                    </a>
                    
                </nav>
                <a class="mobile-header-menu-button">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/head.jpg" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        Vker&#39;s Blog
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        一个专注 游戏研发 的技术博客
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Vker" target="_blank" href="//leng521.top">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                        <a title="Weibo" target="_blank" href="//weibo.com">
                            <i class="fa fa-weibo fa-2x"></i></a>
                    
                        <a title="Twitter" target="_blank" href="//twitter.com">
                            <i class="fa fa-twitter fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>
      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-CocosCreator着色器的简单实用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      CocosCreator着色器的简单实用
    </h1>
    <div class="post-title-bar">
      <ul>
          
              <li>
                  <i class="fa fa-book"></i>
                  
                      <a href="/categories/CocosCreator/">Cocos Creator</a>
                  
              </li>
          
        <li>
          <i class="fa fa-calendar"></i>  2019-03-16
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <p>Cocos Creator 版本: 2.0.8</p>
<p>时间: 2019年3月15日16:53:18</p>
<p>由于Cocos 的材质系统并不是太完善 所以官方并没有推出相关 着色器的文档,但是官方给出了一个Demo, 可以更具这个进行改造一下就可以写自己的着色器了.<br>(官方给出的着色器的例子)[<a href="https://github.com/cocos-creator/heartfelt]">https://github.com/cocos-creator/heartfelt]</a><br><a id="more"></a></p>
<h1 id="给-Sprite-填充一些函数"><a href="#给-Sprite-填充一些函数" class="headerlink" title="给 Sprite 填充一些函数"></a>给 Sprite 填充一些函数</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 支持自定义Shader</span></span><br><span class="line"><span class="keyword">const</span> renderEngine = cc.renderer.renderEngine;</span><br><span class="line"><span class="keyword">const</span> SpriteMaterial = renderEngine.SpriteMaterial;</span><br><span class="line"><span class="keyword">const</span> GraySpriteMaterial = renderEngine.GraySpriteMaterial;</span><br><span class="line"><span class="keyword">const</span> STATE_CUSTOM = <span class="number">101</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取自定义材质</span></span><br><span class="line">cc.Sprite.prototype.getMaterial = <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>._materials) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>._materials[name];</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置自定义材质</span></span><br><span class="line">cc.Sprite.prototype.setMaterial = <span class="function"><span class="keyword">function</span>(<span class="params">name, mat</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!<span class="keyword">this</span>._materials) &#123;</span><br><span class="line">        <span class="keyword">this</span>._materials = &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>._materials[name] = mat;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 激活某个材质</span></span><br><span class="line">cc.Sprite.prototype.activateMaterial = <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> mat = <span class="keyword">this</span>.getMaterial(name);</span><br><span class="line">    <span class="keyword">if</span> (mat &amp;&amp; mat !== <span class="keyword">this</span>._currMaterial) &#123;</span><br><span class="line">        <span class="keyword">if</span> (mat) &#123;</span><br><span class="line">            <span class="keyword">if</span> (<span class="keyword">this</span>.node) &#123;</span><br><span class="line">                mat.color = <span class="keyword">this</span>.node.color;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">if</span> (<span class="keyword">this</span>.spriteFrame) &#123;</span><br><span class="line">                mat.texture = <span class="keyword">this</span>.spriteFrame.getTexture();</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">this</span>.node._renderFlag |= cc.RenderFlow.FLAG_COLOR;</span><br><span class="line">            <span class="keyword">this</span>._currMaterial = mat;</span><br><span class="line">            <span class="keyword">this</span>._currMaterial.name = name;</span><br><span class="line">            <span class="keyword">this</span>._state = STATE_CUSTOM;</span><br><span class="line">            <span class="keyword">this</span>._activateMaterial();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.error(<span class="string">"activateMaterial - unknwon material: "</span>, name);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取当前的材质</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">cc.Sprite.prototype._activateMaterial = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> spriteFrame = <span class="keyword">this</span>._spriteFrame;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// WebGL 暂时支持WebGL</span></span><br><span class="line">    <span class="keyword">if</span> (cc.game.renderType !== cc.game.RENDER_TYPE_CANVAS) &#123;</span><br><span class="line">        <span class="comment">// Get material</span></span><br><span class="line">        <span class="keyword">let</span> material;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">this</span>._state === cc.Sprite.State.GRAY) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!<span class="keyword">this</span>._graySpriteMaterial) &#123;</span><br><span class="line">                <span class="keyword">this</span>._graySpriteMaterial = <span class="keyword">new</span> GraySpriteMaterial();</span><br><span class="line">                <span class="keyword">this</span>.node._renderFlag |= cc.RenderFlow.FLAG_COLOR;</span><br><span class="line">            &#125;</span><br><span class="line">            material = <span class="keyword">this</span>._graySpriteMaterial;</span><br><span class="line">            <span class="keyword">this</span>._currMaterial = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">this</span>._state === STATE_CUSTOM) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!<span class="keyword">this</span>._currMaterial) &#123;</span><br><span class="line">                <span class="built_in">console</span>.error(<span class="string">"_activateMaterial: _currMaterial undefined!"</span>)</span><br><span class="line">                <span class="keyword">return</span>;</span><br><span class="line">            &#125;</span><br><span class="line">            material = <span class="keyword">this</span>._currMaterial;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (!<span class="keyword">this</span>._spriteMaterial) &#123;</span><br><span class="line">                <span class="keyword">this</span>._spriteMaterial = <span class="keyword">new</span> SpriteMaterial();</span><br><span class="line">                <span class="keyword">this</span>.node._renderFlag |= cc.RenderFlow.FLAG_COLOR;</span><br><span class="line">            &#125;</span><br><span class="line">            material = <span class="keyword">this</span>._spriteMaterial;</span><br><span class="line">            <span class="keyword">this</span>._currMaterial = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// Set texture</span></span><br><span class="line">        <span class="keyword">if</span> (spriteFrame &amp;&amp; spriteFrame.textureLoaded()) &#123;</span><br><span class="line">            <span class="keyword">let</span> texture = spriteFrame.getTexture();</span><br><span class="line">            <span class="keyword">if</span> (material.texture !== texture) &#123;</span><br><span class="line">                material.texture = texture;</span><br><span class="line">                <span class="keyword">this</span>._updateMaterial(material);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">else</span> <span class="keyword">if</span> (material !== <span class="keyword">this</span>._material) &#123;</span><br><span class="line">                <span class="keyword">this</span>._updateMaterial(material);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">if</span> (<span class="keyword">this</span>._renderData) &#123;</span><br><span class="line">                <span class="keyword">this</span>._renderData.material = material;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">this</span>.markForUpdateRenderData(<span class="literal">true</span>);</span><br><span class="line">            <span class="keyword">this</span>.markForRender(<span class="literal">true</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">this</span>.disableRender();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="构建一个Shader-Library"><a href="#构建一个Shader-Library" class="headerlink" title="构建一个Shader Library"></a>构建一个Shader Library</h1><blockquote>
<p>在自定义Shader的时候 要在游戏运行前, 传递自定义的 Shader 给引擎进行编译</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> Shader Library</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> ShaderLib = &#123;</span><br><span class="line">    _shaders: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 增加一个新的Shader</span></span><br><span class="line">    addShader: <span class="function"><span class="keyword">function</span>(<span class="params">shader</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">this</span>._shaders[shader.name]) &#123;</span><br><span class="line">            <span class="built_in">console</span>.error(<span class="string">"addShader - shader already exist: "</span>, shader.name);</span><br><span class="line">            <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        cc.renderer._forward._programLib.define(shader.name, shader.vert, shader.frag, shader.defines);</span><br><span class="line">        <span class="keyword">this</span>._shaders[shader.name] = shader;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 取Shader的定义</span></span><br><span class="line">    getShader: <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>._shaders[name];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="构建自定义材质-Material"><a href="#构建自定义材质-Material" class="headerlink" title="构建自定义材质(Material)"></a>构建自定义材质(Material)</h1><blockquote>
<p>这个和 Unity 差不多 也是 多通道(pass)渲染 但是这个例子里面只有 单通道, 没有用到多通道,<br>我这里举一个多通道的例子吧 比如渲染 描边, 在第一个通道渲染 比原图大5像素的图片, 第二个通道 渲染原图, 进而实现描边.<br>至于这个 多通道 我后面看一下 Creator Engine 源码吧 ,, 有时间写一下,,</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Custom Material</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> renderEngine = cc.renderer.renderEngine;</span><br><span class="line"><span class="keyword">const</span> renderer = renderEngine.renderer;</span><br><span class="line"><span class="keyword">const</span> gfx = renderEngine.gfx;</span><br><span class="line"><span class="keyword">const</span> Material = renderEngine.Material;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> CustomMaterial = (<span class="function"><span class="keyword">function</span> (<span class="params">Material$$<span class="number">1</span></span>) </span>&#123;</span><br><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">CustomMaterial</span>(<span class="params">shaderName, params, defines, passList</span>) </span>&#123;</span><br><span class="line">		Material$$<span class="number">1.</span>call(<span class="keyword">this</span>, <span class="literal">false</span>);</span><br><span class="line">		<span class="keyword">var</span> pass;</span><br><span class="line">		<span class="keyword">if</span>(!passList) &#123;</span><br><span class="line">			<span class="comment">// 配置一个简单的的通道 你仔细看后发现后面其实 是个 数组,, 也就是说可以配置多个通道.</span></span><br><span class="line">			<span class="comment">// 这里的 shaderName 就是 前面 传递给引擎的 自定义 Shader 的名字</span></span><br><span class="line">			pass = <span class="keyword">new</span> renderer.Pass(shaderName);</span><br><span class="line">			pass.setDepth(<span class="literal">false</span>, <span class="literal">false</span>);</span><br><span class="line">			pass.setCullMode(gfx.CULL_NONE);</span><br><span class="line">			pass.setBlend(</span><br><span class="line">				gfx.BLEND_FUNC_ADD,</span><br><span class="line">				gfx.BLEND_SRC_ALPHA, gfx.BLEND_ONE_MINUS_SRC_ALPHA,</span><br><span class="line">				gfx.BLEND_FUNC_ADD,</span><br><span class="line">				gfx.BLEND_SRC_ALPHA, gfx.BLEND_ONE_MINUS_SRC_ALPHA</span><br><span class="line">			);</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> techParams = [</span><br><span class="line">			&#123; <span class="attr">name</span>: <span class="string">'texture'</span>, <span class="attr">type</span>: renderer.PARAM_TEXTURE_2D &#125;,</span><br><span class="line">			&#123; <span class="attr">name</span>: <span class="string">'color'</span>, <span class="attr">type</span>: renderer.PARAM_COLOR4 &#125;</span><br><span class="line">		];</span><br><span class="line">		<span class="keyword">if</span> (params) &#123;</span><br><span class="line">			techParams = techParams.concat(params);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">var</span> mainTech = <span class="keyword">new</span> renderer.Technique(</span><br><span class="line">			[<span class="string">'transparent'</span>],</span><br><span class="line">			techParams,</span><br><span class="line">			passList ? passList : [pass],</span><br><span class="line">		);</span><br><span class="line">		<span class="keyword">this</span>.name = shaderName;</span><br><span class="line">		<span class="keyword">this</span>._color = &#123; <span class="attr">r</span>: <span class="number">1</span>, <span class="attr">g</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">1</span>, <span class="attr">a</span>: <span class="number">1</span> &#125;;</span><br><span class="line">		<span class="keyword">this</span>._effect = <span class="keyword">new</span> renderer.Effect(</span><br><span class="line">			[</span><br><span class="line">				mainTech</span><br><span class="line">			],</span><br><span class="line">			&#123;&#125;,</span><br><span class="line">			defines,</span><br><span class="line">		);</span><br><span class="line"></span><br><span class="line">		<span class="keyword">this</span>._mainTech = mainTech;</span><br><span class="line">		<span class="keyword">this</span>._texture = <span class="literal">null</span>;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">if</span> (Material$$<span class="number">1</span>) CustomMaterial.__proto__ = Material$$<span class="number">1</span>;</span><br><span class="line">	CustomMaterial.prototype = <span class="built_in">Object</span>.create(Material$$<span class="number">1</span> &amp;&amp; Material$$<span class="number">1.</span>prototype);</span><br><span class="line">	CustomMaterial.prototype.constructor = CustomMaterial;</span><br><span class="line"></span><br><span class="line">	<span class="keyword">var</span> prototypeAccessors = &#123; <span class="attr">effect</span>: &#123; <span class="attr">configurable</span>: <span class="literal">true</span> &#125;, <span class="attr">texture</span>: &#123; <span class="attr">configurable</span>: <span class="literal">true</span> &#125;, <span class="attr">color</span>: &#123; <span class="attr">configurable</span>: <span class="literal">true</span> &#125; &#125;;</span><br><span class="line"></span><br><span class="line">	prototypeAccessors.effect.get = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>._effect;</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	prototypeAccessors.texture.get = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>._texture;</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	prototypeAccessors.texture.set = <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">this</span>._texture !== val) &#123;</span><br><span class="line">			<span class="keyword">this</span>._texture = val;</span><br><span class="line">			<span class="keyword">this</span>._effect.setProperty(<span class="string">'texture'</span>, val.getImpl());</span><br><span class="line">			<span class="keyword">this</span>._texIds[<span class="string">'texture'</span>] = val.getId();</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	prototypeAccessors.color.get = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>._color;</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	prototypeAccessors.color.set = <span class="function"><span class="keyword">function</span> (<span class="params">val</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">var</span> color = <span class="keyword">this</span>._color;</span><br><span class="line">		color.r = val.r / <span class="number">255</span>;</span><br><span class="line">		color.g = val.g / <span class="number">255</span>;</span><br><span class="line">		color.b = val.b / <span class="number">255</span>;</span><br><span class="line">		color.a = val.a / <span class="number">255</span>;</span><br><span class="line">		<span class="keyword">this</span>._effect.setProperty(<span class="string">'color'</span>, color);</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	CustomMaterial.prototype.clone = <span class="function"><span class="keyword">function</span> <span class="title">clone</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">var</span> copy = <span class="keyword">new</span> CustomMaterial();</span><br><span class="line">		copy.texture = <span class="keyword">this</span>.texture;</span><br><span class="line">		copy.color = <span class="keyword">this</span>.color;</span><br><span class="line">		copy.updateHash();</span><br><span class="line">		<span class="keyword">return</span> copy;</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 设置自定义参数的值</span></span><br><span class="line">	CustomMaterial.prototype.setParamValue = <span class="function"><span class="keyword">function</span> (<span class="params">name, value</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>._effect.setProperty(name, value);</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// 设置定义值</span></span><br><span class="line">	CustomMaterial.prototype.setDefine = <span class="function"><span class="keyword">function</span> (<span class="params">name, value</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>._effect.define(name, value);</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	<span class="built_in">Object</span>.defineProperties(CustomMaterial.prototype, prototypeAccessors);</span><br><span class="line"></span><br><span class="line">	<span class="keyword">return</span> CustomMaterial;</span><br><span class="line">&#125;(Material));</span><br></pre></td></tr></table></figure>
<h1 id="开始测试刚才写的代码"><a href="#开始测试刚才写的代码" class="headerlink" title="开始测试刚才写的代码"></a>开始测试刚才写的代码</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先 Creator 的 写法太长 进行简单的封装</span></span><br><span class="line"><span class="keyword">const</span> renderer = cc.renderer.renderEngine.renderer;</span><br><span class="line"><span class="keyword">const</span> PARAMTYPE = &#123;</span><br><span class="line">    i: renderer.PARAM_INT,</span><br><span class="line">    i2: renderer.PARAM_INT2,</span><br><span class="line">    i3: renderer.PARAM_INT3,</span><br><span class="line">    i4: renderer.PARAM_INT4,</span><br><span class="line"></span><br><span class="line">    f : renderer.PARAM_FLOAT,</span><br><span class="line">    f2 : renderer.PARAM_FLOAT2,</span><br><span class="line">    f3 : renderer.PARAM_FLOAT3,</span><br><span class="line">    f4 : renderer.PARAM_FLOAT4,</span><br><span class="line"></span><br><span class="line">    mat2: renderer.PARAM_MAT2,</span><br><span class="line">    mat3: renderer.PARAM_MAT3,</span><br><span class="line">    mat4: renderer.PARAM_MAT4,</span><br><span class="line"></span><br><span class="line">    tex2d: renderer.PARAM_TEXTURE_2D,</span><br><span class="line">    texCube: renderer.PARAM_TEXTURE_CUBE,</span><br><span class="line">&#125;</span><br><span class="line">cc.Class(&#123;</span><br><span class="line">	properties: &#123;</span><br><span class="line">	&#125;,</span><br><span class="line"></span><br><span class="line">	onLoad() &#123;</span><br><span class="line">		<span class="comment">// 初始化 给 Sprite 补充的函数</span></span><br><span class="line">		<span class="built_in">require</span>(<span class="string">"SpriteHook"</span>).init();</span><br><span class="line">		<span class="comment">// 初始化 自定义 的 Shader</span></span><br><span class="line">		<span class="comment">// 这个 Flash 文件 后面同意给出</span></span><br><span class="line">		<span class="comment">// 因为我还写了几个简单的 Shader</span></span><br><span class="line">		ShaderLib.addShader(<span class="built_in">require</span>(<span class="string">"Flash"</span>));</span><br><span class="line"></span><br><span class="line">		<span class="comment">// 初始化 为了实现这效果需要的变量</span></span><br><span class="line">		<span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">this</span>._sin = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">this</span>.sp = <span class="keyword">this</span>.node.getComponent(cc.Sprite);</span><br><span class="line"></span><br><span class="line">		<span class="keyword">this</span>.flashShader();</span><br><span class="line">	&#125;,</span><br><span class="line"></span><br><span class="line">	<span class="comment">/*</span></span><br><span class="line"><span class="comment">	给精灵设置 材质</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line">	flashShader() &#123;</span><br><span class="line">	    <span class="keyword">let</span> name = <span class="string">'Flash'</span>;</span><br><span class="line">	    <span class="keyword">let</span> material = <span class="keyword">this</span>.sp.getMaterial(name);</span><br><span class="line">	    <span class="keyword">if</span>(!material) &#123;</span><br><span class="line">	        <span class="keyword">var</span> CustomMaterial = <span class="built_in">require</span>(<span class="string">"CustomMaterial"</span>);</span><br><span class="line">	        material = <span class="keyword">new</span> CustomMaterial(name,[</span><br><span class="line">	            &#123;<span class="attr">name</span>: <span class="string">'run_time'</span>, <span class="attr">type</span>: PARAMTYPE.f&#125;</span><br><span class="line">	        ]);</span><br><span class="line">	        <span class="keyword">this</span>.sp.setMaterial(name, material);</span><br><span class="line">	    &#125;</span><br><span class="line"></span><br><span class="line">	    <span class="keyword">this</span>.sp.activateMaterial(name);</span><br><span class="line">	&#125;,</span><br><span class="line"></span><br><span class="line">	update(dt) &#123;</span><br><span class="line">		<span class="keyword">this</span>._time += dt;</span><br><span class="line">		<span class="keyword">this</span>._sin = <span class="built_in">Math</span>.sin(<span class="keyword">this</span>._time);</span><br><span class="line">	    <span class="keyword">if</span>(<span class="keyword">this</span>._sin &gt; <span class="number">0.99</span>) &#123;</span><br><span class="line">	    	<span class="keyword">this</span>._sin = <span class="number">0</span>;</span><br><span class="line">	        <span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">const</span> material = <span class="keyword">this</span>.sp.getCurrMaterial(<span class="string">'Flash'</span>);</span><br><span class="line">	    <span class="keyword">if</span>(!material) &#123;</span><br><span class="line">	        <span class="keyword">return</span>;</span><br><span class="line">	    &#125;</span><br><span class="line">	    material.setParamValue(<span class="string">'run_time'</span>, <span class="keyword">this</span>._sin);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h1 id="自定义-着色器的代码"><a href="#自定义-着色器的代码" class="headerlink" title="自定义 着色器的代码"></a>自定义 着色器的代码</h1><h2 id="Flash-扫光"><a href="#Flash-扫光" class="headerlink" title="Flash (扫光)"></a>Flash (扫光)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 要初始化的变量</span></span><br><span class="line"><span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">this</span>._sin = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 要不停更新的变量(就是要放在update函数里面的变量)</span></span><br><span class="line"><span class="keyword">this</span>._time += dt;</span><br><span class="line"><span class="keyword">this</span>._sin = <span class="built_in">Math</span>.sin(<span class="keyword">this</span>._time);</span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">this</span>._sin &gt; <span class="number">0.99</span>) &#123;</span><br><span class="line">	<span class="keyword">this</span>._sin = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> material = <span class="keyword">this</span>.sp.getCurrMaterial(<span class="string">'Flash'</span>);</span><br><span class="line"><span class="keyword">if</span>(!material) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line">material.setParamValue(<span class="string">'run_time'</span>, <span class="keyword">this</span>._sin);</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shader = &#123;</span><br><span class="line">    name: <span class="string">"Flash"</span>,</span><br><span class="line"></span><br><span class="line">    defines: [],</span><br><span class="line"></span><br><span class="line">    vert: <span class="string">`uniform mat4 viewProj;</span></span><br><span class="line"><span class="string">    attribute vec3 a_position;</span></span><br><span class="line"><span class="string">    attribute vec2 a_uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    varying vec2 v_uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    void main() &#123;</span></span><br><span class="line"><span class="string">        vec4 pos = viewProj * vec4(a_position, 1.);</span></span><br><span class="line"><span class="string">        gl_Position = pos;</span></span><br><span class="line"><span class="string">        v_uv0 = a_uv0;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line"></span><br><span class="line">    frag: <span class="string">`uniform sampler2D texture;</span></span><br><span class="line"><span class="string">    /*uniform vec4 color;*/</span></span><br><span class="line"><span class="string">    uniform float run_time;</span></span><br><span class="line"><span class="string">    varying vec2 v_uv0;</span></span><br><span class="line"><span class="string">    </span></span><br><span class="line"><span class="string">    void main() &#123;</span></span><br><span class="line"><span class="string">        vec4 origin_color = texture2D(texture, v_uv0);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        float width = 0.05;</span></span><br><span class="line"><span class="string">        float start = run_time * 1.2;</span></span><br><span class="line"><span class="string">        float strength = 0.01;</span></span><br><span class="line"><span class="string">        float offset = 0.2;</span></span><br><span class="line"><span class="string">        vec4 out_color = origin_color;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        if(v_uv0.x &lt; (start - offset * v_uv0.y) &amp;&amp; v_uv0.x &gt; (start - offset * v_uv0.y - width)) &#123;</span></span><br><span class="line"><span class="string">            vec3 blendColor = strength * vec3(255,255,255);</span></span><br><span class="line"><span class="string">            out_color = vec4((blendColor * vec3(origin_color.rgb)),out_color.a);</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">        gl_FragColor = out_color;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Mosaic-方形马赛克"><a href="#Mosaic-方形马赛克" class="headerlink" title="Mosaic(方形马赛克)"></a>Mosaic(方形马赛克)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">这个没有要变量的 就是根据 周围像素区中进行模糊</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shader = &#123;</span><br><span class="line">    name: <span class="string">"Mosaic"</span>,</span><br><span class="line">    </span><br><span class="line">    defines: [],</span><br><span class="line"></span><br><span class="line">    vert: <span class="string">`uniform mat4 viewProj;</span></span><br><span class="line"><span class="string">        attribute vec3 a_position;</span></span><br><span class="line"><span class="string">        attribute vec2 a_uv0;</span></span><br><span class="line"><span class="string">        varying vec2 uv0;</span></span><br><span class="line"><span class="string">        void main () &#123;</span></span><br><span class="line"><span class="string">            vec4 pos = viewProj * vec4(a_position, 1);</span></span><br><span class="line"><span class="string">            gl_Position = pos;</span></span><br><span class="line"><span class="string">            uv0 = a_uv0;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">        `</span>,</span><br><span class="line"></span><br><span class="line">    frag: <span class="string">`uniform sampler2D texture;</span></span><br><span class="line"><span class="string">    uniform vec3 imageSize;</span></span><br><span class="line"><span class="string">    uniform float mosaicSize;</span></span><br><span class="line"><span class="string">    varying vec2 uv0;</span></span><br><span class="line"><span class="string">     </span></span><br><span class="line"><span class="string">    void main(void)</span></span><br><span class="line"><span class="string">    &#123;</span></span><br><span class="line"><span class="string">        vec4 color;</span></span><br><span class="line"><span class="string">        vec2 xy = vec2(uv0.x * imageSize.x, uv0.y * imageSize.y);</span></span><br><span class="line"><span class="string">        vec2 xyMosaic = vec2(floor(xy.x / mosaicSize) * mosaicSize, floor(xy.y / mosaicSize) * mosaicSize);</span></span><br><span class="line"><span class="string">        vec2 uvMosaic = vec2(xyMosaic.x / imageSize.x, xyMosaic.y / imageSize.y);</span></span><br><span class="line"><span class="string">        color = texture2D( texture, uvMosaic);</span></span><br><span class="line"><span class="string">        gl_FragColor = color; </span></span><br><span class="line"><span class="string">    &#125;`</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Move-UV动画"><a href="#Move-UV动画" class="headerlink" title="Move(UV动画)"></a>Move(UV动画)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 要初始化的变量</span></span><br><span class="line"><span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 要更新的变量</span></span><br><span class="line"><span class="keyword">this</span>._time += dt;</span><br><span class="line"><span class="keyword">this</span>._moveTime = <span class="keyword">this</span>._time;</span><br><span class="line"><span class="keyword">this</span>._moveTime %= <span class="number">3.35</span>;</span><br><span class="line"><span class="keyword">const</span> material = <span class="keyword">this</span>.sp.getCurrMaterial(<span class="string">'Move'</span>);</span><br><span class="line"><span class="keyword">if</span>(!material) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line">material.setParamValue(<span class="string">'run_time'</span>, <span class="keyword">this</span>._moveTime);</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shader = &#123;</span><br><span class="line">    name: <span class="string">"Move"</span>,</span><br><span class="line">    </span><br><span class="line">    defines: [],</span><br><span class="line"></span><br><span class="line">    vert: <span class="string">`uniform mat4 viewProj;</span></span><br><span class="line"><span class="string">        attribute vec3 a_position;</span></span><br><span class="line"><span class="string">        attribute vec2 a_uv0;</span></span><br><span class="line"><span class="string">        varying vec2 uv0;</span></span><br><span class="line"><span class="string">        void main () &#123;</span></span><br><span class="line"><span class="string">            vec4 pos = viewProj * vec4(a_position, 1);</span></span><br><span class="line"><span class="string">            gl_Position = pos;</span></span><br><span class="line"><span class="string">            uv0 = a_uv0;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">        `</span>,</span><br><span class="line"></span><br><span class="line">    frag: <span class="string">`uniform sampler2D texture;</span></span><br><span class="line"><span class="string">    uniform float run_time;</span></span><br><span class="line"><span class="string">    varying vec2 uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    void main()</span></span><br><span class="line"><span class="string">    &#123;</span></span><br><span class="line"><span class="string">        float x = uv0.x + run_time * 0.3;</span></span><br><span class="line"><span class="string">        vec2 uv_o = vec2(x - floor(x),uv0.y);</span></span><br><span class="line"><span class="string">        gl_FragColor = texture2D(texture, uv_o);</span></span><br><span class="line"><span class="string">    &#125;`</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>Vortex(风暴)<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 要初始化的变量</span></span><br><span class="line"><span class="keyword">this</span>._angle = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">this</span>._radius = <span class="number">0.1</span>;</span><br><span class="line"><span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 要不停更新的变量(就是要放在update函数里面的变量)</span></span><br><span class="line"><span class="keyword">this</span>._time += dt;</span><br><span class="line"><span class="keyword">this</span>._angle += <span class="number">0.03</span>;</span><br><span class="line"><span class="keyword">this</span>._radius += <span class="number">0.003</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">this</span>._angle &gt;= <span class="number">5</span>) &#123;</span><br><span class="line">    <span class="keyword">this</span>._angle = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">this</span>._radius = <span class="number">0.1</span>;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> material = <span class="keyword">this</span>.sp.getCurrMaterial(<span class="string">'Vortex'</span>);</span><br><span class="line"><span class="keyword">if</span>(!material) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line">material.setParamValue(<span class="string">'_Radius'</span>,<span class="keyword">this</span>._radius);</span><br><span class="line">material.setParamValue(<span class="string">'_Angle'</span>,<span class="keyword">this</span>._angle);</span><br></pre></td></tr></table></figure></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shader = &#123;</span><br><span class="line">    name: <span class="string">"Vortex"</span>,</span><br><span class="line">    </span><br><span class="line">    defines: [],</span><br><span class="line"></span><br><span class="line">    vert: <span class="string">`uniform mat4 viewProj;</span></span><br><span class="line"><span class="string">        attribute vec3 a_position;</span></span><br><span class="line"><span class="string">        attribute vec2 a_uv0;</span></span><br><span class="line"><span class="string">        varying vec2 uv0;</span></span><br><span class="line"><span class="string">        void main () &#123;</span></span><br><span class="line"><span class="string">            vec4 pos = viewProj * vec4(a_position, 1);</span></span><br><span class="line"><span class="string">            gl_Position = pos;</span></span><br><span class="line"><span class="string">            uv0 = a_uv0;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">        `</span>,</span><br><span class="line"></span><br><span class="line">    frag: <span class="string">`</span></span><br><span class="line"><span class="string">    uniform sampler2D texture;</span></span><br><span class="line"><span class="string">    uniform float _Radius;</span></span><br><span class="line"><span class="string">    uniform float _Angle;</span></span><br><span class="line"><span class="string">    varying vec2 uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    vec2 swirl(vec2 uv)</span></span><br><span class="line"><span class="string">    &#123;</span></span><br><span class="line"><span class="string">        //先减去贴图中心点的纹理坐标,这样是方便旋转计算</span></span><br><span class="line"><span class="string">        uv -= vec2(0.5, 0.5);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        //计算当前坐标与中心点的距离。</span></span><br><span class="line"><span class="string">        float dist = length(uv);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        //计算出旋转的百分比</span></span><br><span class="line"><span class="string">        float percent = (_Radius - dist) / _Radius;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        if (percent &lt; 1.0 &amp;&amp; percent &gt;= 0.0)</span></span><br><span class="line"><span class="string">        &#123;</span></span><br><span class="line"><span class="string">            //通过sin,cos来计算出旋转后的位置。</span></span><br><span class="line"><span class="string">            float theta = percent * percent * _Angle * 8.0;</span></span><br><span class="line"><span class="string">            float s = sin(theta);</span></span><br><span class="line"><span class="string">            float c = cos(theta);</span></span><br><span class="line"><span class="string">            //uv = vec2(dot(uv, vec2(c, -s)), dot(uv, vec2(s, c)));</span></span><br><span class="line"><span class="string">            uv = vec2(uv.x*c - uv.y*s, uv.x*s + uv.y*c);</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        //再加上贴图中心点的纹理坐标，这样才正确。</span></span><br><span class="line"><span class="string">        uv += vec2(0.5, 0.5);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        return uv;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    void main() &#123;</span></span><br><span class="line"><span class="string">        vec2 uv_new = swirl(uv0);</span></span><br><span class="line"><span class="string">        gl_FragColor = texture2D(texture, uv_new);</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Water-水"><a href="#Water-水" class="headerlink" title="Water(水)"></a>Water(水)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// 要初始化的变量</span><br><span class="line">this._time = 0;</span><br><span class="line"></span><br><span class="line">// 要更新的变量</span><br><span class="line">this._time += dt;</span><br><span class="line">const material = this.sp.getCurrMaterial(&apos;Water&apos;);</span><br><span class="line">if(!material) &#123;</span><br><span class="line">    return;</span><br><span class="line">&#125;</span><br><span class="line">material.setParamValue(&apos;run_time&apos;, this._time);</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shader = &#123;</span><br><span class="line">    name: <span class="string">"Water"</span>,</span><br><span class="line">    </span><br><span class="line">    defines: [],</span><br><span class="line"></span><br><span class="line">    vert: <span class="string">`uniform mat4 viewProj;</span></span><br><span class="line"><span class="string">        attribute vec3 a_position;</span></span><br><span class="line"><span class="string">        attribute vec2 a_uv0;</span></span><br><span class="line"><span class="string">        varying vec2 uv0;</span></span><br><span class="line"><span class="string">        void main () &#123;</span></span><br><span class="line"><span class="string">            vec4 pos = viewProj * vec4(a_position, 1);</span></span><br><span class="line"><span class="string">            gl_Position = pos;</span></span><br><span class="line"><span class="string">            uv0 = a_uv0;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">        `</span>,</span><br><span class="line"></span><br><span class="line">    frag: <span class="string">`uniform sampler2D texture;</span></span><br><span class="line"><span class="string">    uniform vec3 imageSize;</span></span><br><span class="line"><span class="string">    uniform float run_time;</span></span><br><span class="line"><span class="string">    varying vec2 uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    #define F cos(x-y)*cos(y),sin(x+y)*sin(y)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    vec2 s(vec2 p)</span></span><br><span class="line"><span class="string">    &#123;</span></span><br><span class="line"><span class="string">        float d=run_time*0.2,x=8.*(p.x+d),y=8.*(p.y+d);</span></span><br><span class="line"><span class="string">        return vec2(F);</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    void mainImage( out vec4 fragColor, in vec2 fragCoord )</span></span><br><span class="line"><span class="string">    &#123;</span></span><br><span class="line"><span class="string">        vec2 rs = imageSize.xy;</span></span><br><span class="line"><span class="string">        vec2 uv = fragCoord;</span></span><br><span class="line"><span class="string">        vec2 q = uv+2./imageSize.x*(s(uv)-s(uv+rs));</span></span><br><span class="line"><span class="string">        // q.y=1.-q.y;</span></span><br><span class="line"><span class="string">        fragColor = texture2D(texture, q);</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    void main()</span></span><br><span class="line"><span class="string">    &#123;</span></span><br><span class="line"><span class="string">        mainImage(gl_FragColor, uv0.xy);</span></span><br><span class="line"><span class="string">    &#125;`</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Wave-波浪"><a href="#Wave-波浪" class="headerlink" title="Wave(波浪)"></a>Wave(波浪)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 要初始化的变量</span></span><br><span class="line"><span class="keyword">this</span>._time = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 要更新的变量</span></span><br><span class="line"><span class="keyword">this</span>._time += dt;</span><br><span class="line"><span class="keyword">const</span> material = <span class="keyword">this</span>.sp.getCurrMaterial(<span class="string">'Wave'</span>);</span><br><span class="line"><span class="keyword">if</span>(!material) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line">material.setParamValue(<span class="string">'run_time'</span>, <span class="keyword">this</span>._time);</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shader = &#123;</span><br><span class="line">    name: <span class="string">"Wave"</span>,</span><br><span class="line"></span><br><span class="line">    defines: [],</span><br><span class="line"></span><br><span class="line">    vert: <span class="string">`uniform mat4 viewProj;</span></span><br><span class="line"><span class="string">    attribute vec3 a_position;</span></span><br><span class="line"><span class="string">    attribute vec2 a_uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    varying vec2 v_uv0;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    void main() &#123;</span></span><br><span class="line"><span class="string">        vec4 pos = viewProj * vec4(a_position, 1.);</span></span><br><span class="line"><span class="string">        gl_Position = pos;</span></span><br><span class="line"><span class="string">        v_uv0 = a_uv0;</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line"></span><br><span class="line">    frag: <span class="string">`uniform sampler2D texture;</span></span><br><span class="line"><span class="string">    /*uniform vec4 color;*/</span></span><br><span class="line"><span class="string">    uniform float run_time;</span></span><br><span class="line"><span class="string">    uniform vec2 offsetXY;</span></span><br><span class="line"><span class="string">    uniform float speed;</span></span><br><span class="line"><span class="string">    </span></span><br><span class="line"><span class="string">    varying vec2 v_uv0;</span></span><br><span class="line"><span class="string">    </span></span><br><span class="line"><span class="string">    void main() &#123;</span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        vec4 out_color;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        vec2 xy = v_uv0;</span></span><br><span class="line"><span class="string">        xy.x += (sin(xy.x * 30. + run_time * speed) / 30. * offsetXY.x);</span></span><br><span class="line"><span class="string">        xy.y += (sin(xy.y * 30. + run_time * speed) / 30. * offsetXY.y);</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        gl_FragColor = texture2D(texture, xy);</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>还有一个简单的置灰效果没有写，这个因为Creator Engine 自带，所以就没有写。可以看一下<code>Sprite</code> 这个组件的API官方应该介绍的有， 置灰其实 rgb×0.3 就差不多了。</p>
</blockquote>
<h1 id="将所有的-逻辑整合到一个脚本里面-ShaderComponent"><a href="#将所有的-逻辑整合到一个脚本里面-ShaderComponent" class="headerlink" title="将所有的 逻辑整合到一个脚本里面 ShaderComponent"></a>将所有的 逻辑整合到一个脚本里面 ShaderComponent</h1><a href="/posts/e02f2181/ShaderComponent.txt" title="ShaderComponent.txt">ShaderComponent.txt</a>
<blockquote>
<p>由于后缀名字为 js 会导致博客渲染出错, 所以改为 txt 你们自行改之就行.<br>这里面会去 require 那几个着色器 你们自己将上面自定义的着色器代码 创建出来.</p>
</blockquote>
<h1 id="这么做会带来的一些问题"><a href="#这么做会带来的一些问题" class="headerlink" title="这么做会带来的一些问题"></a>这么做会带来的一些问题</h1><p>1.精灵运行渐变的Action 就会没有效果 因为这里只是采样纹理的颜色并做出一定的变换并没有融合节点本身的颜色值，如果想做透明变换，你可以给着色器传递值<br>2.在手机上可能会因为精度问题导致，渲染有问题， 你可以采取高精度的类型 如： #ifdef GL_ES highp float xx; #enif  还 中等精度 mediump lowp</p>
<p>如果有其他问题或则是意见可以加我QQ讨论。</p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2019年08月14日 11:22</p>
        <p>原始链接： <a class="post-url" href="/posts/e02f2181/" title="CocosCreator着色器的简单实用">https://leng521.top/posts/e02f2181/</a></p>
        <footer>
            <a href="https://leng521.top">
                <img src="/head.jpg" alt="小魏">
                小魏
            </a>
        </footer>
    </div>
</div>

      
        
            

        
    </div>
    <footer class="article-footer">
        
        
<div class="post-share">
    <a href="javascript:;" id="share-sub" class="post-share-fab">
        <i class="fa fa-share-alt"></i>
    </a>
    <div class="post-share-list" id="share-list">
        <ul class="share-icons">
          <li>
            <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://leng521.top/posts/e02f2181/&title=《CocosCreator着色器的简单实用》 — 小魏的博客&pic=https://leng521.tophead.jpg" data-title="微博">
              <i class="fa fa-weibo"></i>
            </a>
          </li>
          <li>
            <a class="weixin share-sns" id="wxFab" href="javascript:;" data-title="微信">
              <i class="fa fa-weixin"></i>
            </a>
          </li>
          <li>
            <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://leng521.top/posts/e02f2181/&title=《CocosCreator着色器的简单实用》 — 小魏的博客&source=Cocos Creator 版本: 2.0.8
时间: 2019年3月15日16:53:18
由于Cocos 的材质系统并不是太完善 所以官方并没有推出相..." data-title="QQ">
              <i class="fa fa-qq"></i>
            </a>
          </li>
          <li>
            <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://leng521.top/posts/e02f2181/" data-title="Facebook">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li>
            <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CocosCreator着色器的简单实用》 — 小魏的博客&url=https://leng521.top/posts/e02f2181/&via=https://leng521.top" data-title="Twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li>
            <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://leng521.top/posts/e02f2181/" data-title="Google+">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        </ul>
     </div>
</div>
<div class="post-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;" id="wxShare-close">×</a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>

<div class="mask"></div>

        
        <ul class="article-footer-menu">
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/CocosCreator/" class="color4">Cocos Creator</a>
      
    <a href="/tags/优化/" class="color3">优化</a>
      
  </li>

        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos post-toc-top" id="post-toc">
        <nav class="post-toc-wrap">
            <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#给-Sprite-填充一些函数"><span class="post-toc-text">给 Sprite 填充一些函数</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#构建一个Shader-Library"><span class="post-toc-text">构建一个Shader Library</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#构建自定义材质-Material"><span class="post-toc-text">构建自定义材质(Material)</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#开始测试刚才写的代码"><span class="post-toc-text">开始测试刚才写的代码</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#自定义-着色器的代码"><span class="post-toc-text">自定义 着色器的代码</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Flash-扫光"><span class="post-toc-text">Flash (扫光)</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Mosaic-方形马赛克"><span class="post-toc-text">Mosaic(方形马赛克)</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Move-UV动画"><span class="post-toc-text">Move(UV动画)</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Water-水"><span class="post-toc-text">Water(水)</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Wave-波浪"><span class="post-toc-text">Wave(波浪)</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#将所有的-逻辑整合到一个脚本里面-ShaderComponent"><span class="post-toc-text">将所有的 逻辑整合到一个脚本里面 ShaderComponent</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#这么做会带来的一些问题"><span class="post-toc-text">这么做会带来的一些问题</span></a></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
    <a href="/posts/5e8fa495/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          一张图搞懂js原型链
        
      </span>
    </a>
  
  
    <a href="/posts/7f7eba5/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">CocosCreator一些简单的优化记录</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
        <!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8zNDA0MC8xMDU3OA==">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by  <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2019 小魏<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "https://leng521.top",
      animate: true,
      isHome: false,
      share: true,
      reward: 0
  }
</script>
<div class="sidebar">
    <div id="sidebar-search" title="Search">
        <i class="fa fa-search"></i>
    </div>
    <div id="sidebar-category" title="Categories">
        <i class="fa fa-book"></i>
    </div>
    <div id="sidebar-tag" title="Tags">
        <i class="fa fa-tags"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box" id="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-categories">
            <a class="category-link" href="/categories/Cocos-Creator/">Cocos Creator</a><a class="category-link" href="/categories/QQ玩一玩/">QQ玩一玩</a><a class="category-link" href="/categories/cocos2d-x/">cocos2d-x</a><a class="category-link" href="/categories/cocos2dx/">cocos2dx</a><a class="category-link" href="/categories/git/">git</a><a class="category-link" href="/categories/hexo/">hexo</a><a class="category-link" href="/categories/js/">js</a><a class="category-link" href="/categories/linux/">linux</a><a class="category-link" href="/categories/python/">python</a><a class="category-link" href="/categories/前端/">前端</a><a class="category-link" href="/categories/前端/WebGL/">WebGL</a><a class="category-link" href="/categories/前端/bgfx/">bgfx</a><a class="category-link" href="/categories/后端/">后端</a><a class="category-link" href="/categories/后端/golang/">golang</a><a class="category-link" href="/categories/后端/golang/protobuf/">protobuf</a><a class="category-link" href="/categories/后端/nodejs/">nodejs</a><a class="category-link" href="/categories/微信小游戏/">微信小游戏</a><a class="category-link" href="/categories/插件/">插件</a><a class="category-link" href="/categories/自动构建工具/">自动构建工具</a>
        </div>
        <div id="sidebar-menu-box-tags">
            <a href="/tags/9宫格/" style="font-size: 10px;">9宫格</a> <a href="/tags/Cocos-Creator/" style="font-size: 20px;">Cocos Creator</a> <a href="/tags/IT/" style="font-size: 10px;">IT</a> <a href="/tags/QQ玩一玩/" style="font-size: 10px;">QQ玩一玩</a> <a href="/tags/TweenLite/" style="font-size: 10px;">TweenLite</a> <a href="/tags/WebGL/" style="font-size: 10px;">WebGL</a> <a href="/tags/android-studio/" style="font-size: 10px;">android studio</a> <a href="/tags/bgfx/" style="font-size: 12.5px;">bgfx</a> <a href="/tags/c/" style="font-size: 12.5px;">c++</a> <a href="/tags/cocos2d-x/" style="font-size: 15px;">cocos2d-x</a> <a href="/tags/cpp/" style="font-size: 12.5px;">cpp</a> <a href="/tags/gcc/" style="font-size: 10px;">gcc</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/git-扩展工具/" style="font-size: 10px;">git 扩展工具</a> <a href="/tags/github-page/" style="font-size: 10px;">github page</a> <a href="/tags/git命令/" style="font-size: 10px;">git命令</a> <a href="/tags/golang/" style="font-size: 15px;">golang</a> <a href="/tags/hello-world/" style="font-size: 10px;">hello world</a> <a href="/tags/hexo/" style="font-size: 12.5px;">hexo</a> <a href="/tags/js/" style="font-size: 12.5px;">js</a> <a href="/tags/lua/" style="font-size: 12.5px;">lua</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/optionParser/" style="font-size: 10px;">optionParser</a> <a href="/tags/protobuf/" style="font-size: 10px;">protobuf</a> <a href="/tags/python/" style="font-size: 17.5px;">python</a> <a href="/tags/scons/" style="font-size: 12.5px;">scons</a> <a href="/tags/spine/" style="font-size: 10px;">spine</a> <a href="/tags/sublime插件/" style="font-size: 10px;">sublime插件</a> <a href="/tags/websocket/" style="font-size: 10px;">websocket</a> <a href="/tags/xmake/" style="font-size: 12.5px;">xmake</a> <a href="/tags/优化/" style="font-size: 12.5px;">优化</a> <a href="/tags/前端/" style="font-size: 15px;">前端</a> <a href="/tags/博客/" style="font-size: 10px;">博客</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/后端/" style="font-size: 10px;">后端</a> <a href="/tags/广告/" style="font-size: 10px;">广告</a> <a href="/tags/微信小游戏/" style="font-size: 20px;">微信小游戏</a> <a href="/tags/缺少dll/" style="font-size: 10px;">缺少dll</a> <a href="/tags/闭包/" style="font-size: 10px;">闭包</a>
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="mobile-header-menu-nav" id="mobile-header-menu-nav">
    <div class="mobile-header-menu-container">
        <span class="title">Menus</span>
        <ul class="mobile-header-menu-navbar">
            
            <li>
                <a  href="/">
                    <i class="fa fa-home"></i><span>Home</span>
                </a>
            </li>
            
            <li>
                <a  href="/archives">
                    <i class="fa fa-archive"></i><span>Archives</span>
                </a>
            </li>
            
            <li>
                <a  href="/about">
                    <i class="fa fa-user"></i><span>About</span>
                </a>
            </li>
            
        </ul>
    </div>
    <div class="mobile-header-tag-container">
        <span class="title">Tags</span>
        <div id="mobile-header-container-tags">
            <a href="/tags/9宫格/" style="font-size: 10px;">9宫格</a> <a href="/tags/Cocos-Creator/" style="font-size: 20px;">Cocos Creator</a> <a href="/tags/IT/" style="font-size: 10px;">IT</a> <a href="/tags/QQ玩一玩/" style="font-size: 10px;">QQ玩一玩</a> <a href="/tags/TweenLite/" style="font-size: 10px;">TweenLite</a> <a href="/tags/WebGL/" style="font-size: 10px;">WebGL</a> <a href="/tags/android-studio/" style="font-size: 10px;">android studio</a> <a href="/tags/bgfx/" style="font-size: 12.5px;">bgfx</a> <a href="/tags/c/" style="font-size: 12.5px;">c++</a> <a href="/tags/cocos2d-x/" style="font-size: 15px;">cocos2d-x</a> <a href="/tags/cpp/" style="font-size: 12.5px;">cpp</a> <a href="/tags/gcc/" style="font-size: 10px;">gcc</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/git-扩展工具/" style="font-size: 10px;">git 扩展工具</a> <a href="/tags/github-page/" style="font-size: 10px;">github page</a> <a href="/tags/git命令/" style="font-size: 10px;">git命令</a> <a href="/tags/golang/" style="font-size: 15px;">golang</a> <a href="/tags/hello-world/" style="font-size: 10px;">hello world</a> <a href="/tags/hexo/" style="font-size: 12.5px;">hexo</a> <a href="/tags/js/" style="font-size: 12.5px;">js</a> <a href="/tags/lua/" style="font-size: 12.5px;">lua</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/optionParser/" style="font-size: 10px;">optionParser</a> <a href="/tags/protobuf/" style="font-size: 10px;">protobuf</a> <a href="/tags/python/" style="font-size: 17.5px;">python</a> <a href="/tags/scons/" style="font-size: 12.5px;">scons</a> <a href="/tags/spine/" style="font-size: 10px;">spine</a> <a href="/tags/sublime插件/" style="font-size: 10px;">sublime插件</a> <a href="/tags/websocket/" style="font-size: 10px;">websocket</a> <a href="/tags/xmake/" style="font-size: 12.5px;">xmake</a> <a href="/tags/优化/" style="font-size: 12.5px;">优化</a> <a href="/tags/前端/" style="font-size: 15px;">前端</a> <a href="/tags/博客/" style="font-size: 10px;">博客</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/后端/" style="font-size: 10px;">后端</a> <a href="/tags/广告/" style="font-size: 10px;">广告</a> <a href="/tags/微信小游戏/" style="font-size: 20px;">微信小游戏</a> <a href="/tags/缺少dll/" style="font-size: 10px;">缺少dll</a> <a href="/tags/闭包/" style="font-size: 10px;">闭包</a>
        </div>
    </div>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
    <div class="search-container" id="search-container">
        <ul class="search-result" id="search-result">
        </ul>
    </div>
</div>

<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>


  <script src="//cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
  <div id="particles"></div>
  <script src="/js/particles.js"></script>







  <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
  <script src="//cdn.bootcss.com/scrollReveal.js/3.0.5/scrollreveal.js"></script>
  <script src="/js/animate.js"></script>


  <script src="/js/pop-img.js"></script>
  <script>
     $(".article-entry p img").popImg();
  </script>

  </div>
</body>
</html>